import { PageContainer } from "@ant-design/pro-components";
import { Card, Descriptions, DescriptionsProps, Form, message, Spin } from "antd";
import React, { useEffect, useState } from "react";
import storage from "@/utils/store";
import { getUserListData } from "./api";
import './index.less';

interface UserInfo {
  id: string | number;
  [key: string]: any;
}

const Center: React.FC = () => {
    const [loading, setLoading] = useState(false);
    const [form] = Form.useForm();
    const [data, setData] = useState<any>();

    // 获取参数
    const getUserList = async () => {
        setLoading(true);

        const info = storage.getLocal('info') as UserInfo | null;
        const id = info ? info.id : null;

        if (id) {
            const res = await getUserListData(
                {
                    id: id,
                    page: 1,
                    pageSize: 10,
                });
            if (res.code === 200) {
                setData(res.data.userList[0]);
            }
        } else {
            message.error('用户信息未找到');
        }
        setLoading(false);
    }

    //渲染调用
    useEffect(() => {
        getUserList();   
    }, []);

    const items: DescriptionsProps['items'] = [
        {
            key: '1',
            label: '用户名',
            children: data?.username,
        },
        {
            key: '2',
            label: '账号',
            children: data?.account,
        },
        {
            key: '3',
            label: '电话号码',
            children: data?.phoneNumber,
        },
        {
            key: '4',
            label: '邮箱',
            children: data?.email,
        },
        {
            key: '5',
            label: '身份',
            children: data?.permissions === 0 ? '管理员': '用户',
        },
        {
            key: '6',
            label: '生日',
            children: data?.birthday,
        },
        {
            key: '7',
            label: '性别',
            children: data?.gender === 1 ? '男' : '女',
        },
        {
            key: '8',
            label: '注册时间',
            children: data?.createTime,
        },
        {
            key: '9',
            label: '简介',
            span: 3,
            children: data?.profile,
        },
    ];

    return (
        <PageContainer>
            <Spin spinning={loading}>
                <div className="user-center-container">
                    <Card className="user-center-card">
                        <h2 className="user-center-title">个人信息</h2>
                        <div className="user-center-avatar">
                            <div className="avatar-placeholder">
                                {data?.username?.charAt(0).toUpperCase() || '用'}
                            </div>
                        </div>
                        <Descriptions 
                            bordered 
                            items={items} 
                            column={1}
                            className="user-center-descriptions"
                        />
                    </Card>
                </div>
            </Spin>
        </PageContainer>
    );
}
export default Center;

